<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-13 19:32:29
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-18 17:08:12
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header>
        <div class="header">
          <span>权限角色</span>
          <span>
            <el-button
              @click="addDialogShow = true"
              type="success"
              icon="CirclePlus"
              >添加</el-button
            >
          </span>
        </div>
      </template>

      <!-- table -->
      <el-table :data="roleList" style="width: 100%">
        <el-table-column prop="id" label="id" />
        <el-table-column label="分类">
          <template #default="scope">
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="handleRemove(scope.row,scope.$index)" type="danger" icon="Delete">删除</el-button>
            <el-button @click="handleEdit(scope.row)" type="primary" icon="Edit">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加 对话框 -->
    <el-dialog v-model="addDialogShow" title="添加角色">
      <el-form
        ref="addFormRef"
        :rules="rules"
        :model="addForm"
        label-position="top"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input type="text" v-model="addForm.name"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-button
          @click="handleAddSubmit"
          type="primary"
          class="btn-1"
          icon="CirclePlus"
          style="width: 100%"
          round
          >添 加</el-button
        >
      </el-form>
    </el-dialog>

    <!-- 编辑 对话框 -->
    <el-dialog v-model="editDialogShow" title="编辑角色">
      <el-form
        ref="editFormRef"
        :rules="rules"
        :model="editForm"
        label-position="top"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input type="text" v-model="editForm.name"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-button
          @click="handleEditSubmit"
          type="primary"
          class="btn-1"
          icon="CirclePlus"
          style="width: 100%"
          round
          >保 存</el-button
        >
      </el-form>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { role } from "@/api";

let roleList = ref((await role.getList()).data);

// 表单实例
const addFormRef = ref(null);
const editFormRef = ref(null);

// 对话框显示
const addDialogShow = ref(false);
const editDialogShow = ref(false);

// 表单
const addForm = ref({
  name: "",
});
const editForm = ref({});

// 验证规则
const rules = reactive({
  name: [{ required: true, message: "角色名称", trigger: "blur" }],
});

/**
 * @description: 添加
 * @return {*}
 */
const handleAddSubmit = () => {
  addFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await role.add(addForm.value);
      if (res.status) {
        ElMessage.success("添加成功");
        roleList.value = (await role.getList()).data;
        addDialogShow.value = false;
        addForm.value.name = '' 
        return;
      }
      ElMessage.error(res.msg);
      return;
    }
  });
};


/**
 * @description: 删除
 * @return {*}
 * @param {*} row
 * @param {*} index
 */
const handleRemove = (row, index) => {
  ElMessageBox.confirm(`您是否确认删除 ${row.name} ?`, "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let { status, msg } = await role.remove(row.id);
      if (status) {
        roleList.value.splice(index, 1);
      }
      ElMessage({
        type: status ? "success" : "error",
        message: msg,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

/**
 * @description: 打开编辑对话框
 * @return {*}
 * @param {*} row
 */
const handleEdit = (row) => {
  editForm.value = row;
  editDialogShow.value = true;
};

/**
 * @description: 编辑
 * @return {*}
 */
const handleEditSubmit = () => {
  editFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await role.edit(editForm.value.id, editForm.value);
      if (res.status) {
        ElMessage.success("编辑成功");
        // roleList.value = (await role.list()).data;
        editDialogShow.value = false;
        return;
      }
      ElMessage.error(res.msg);
      return;
    }
  });
};
console.log(roleList.value);
</script>

<style lang='less' scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
